<template>
  <el-upload
    ref="uploadRef"
    action
    :limit="1"
    :accept="'.xlsx'"
    :on-success="ossUploadSuccess"
    :http-request="ossUpload"
    :on-error="ossUploadError"
    :auto-upload="false"
  >
    <template #trigger>
      <el-button style="width: 300px">点击上传</el-button>
    </template>
    <template #tip>
      <div class="el-upload__tip text-red">
        限制一个文件，新上传的文件会覆盖原文件
      </div>
    </template>
  </el-upload>
  <el-form-item class="note-button-group flex-s">
    <el-button size="large" @click="cancel">取消</el-button>
    <el-button class="ml50" size="large" type="primary" @click="confirmUpload">
      确定
    </el-button>
  </el-form-item>
</template>
<script lang="ts" setup>
import { ref, defineEmits, defineProps } from "vue";
import { baseMsg } from "@/utils/utils";
import { ProviderUpload } from "@/api/provider";
import { ProjectUpload } from "@/api/project";
import { ProductUpload } from "@/api/product";
import { BrandUpload } from "@/api/brand";
import { ExpertUpload } from "@/api/expert";
import { UserUpload } from "@/api/user";
import type { UploadInstance } from "element-plus";
const uploadRef = ref<UploadInstance>();
const emit = defineEmits(["success", "error", "cancel"]);
const props = defineProps({
  // 上传类型 如供应商等
  uploadType: {
    type: String,
    default: "",
  },
});
const fileList = ref([]);
// 上传中
const ossUpload = async (option) => {
  const file = option.file;
  const filedata = new FormData();
  filedata.append("file", file);
  // 供应商上传
  if (props.uploadType === "provider") {
    ProviderUpload(filedata).then((res) => {
      if (res.code == 4202) {
        ossUploadSuccess(res.data);
      } else {
        ossUploadError(res.data);
      }
      uploadRef.value!.clearFiles();
    });
  }
  // 项目上传
  if (props.uploadType === "project") {
    ProjectUpload(filedata).then((res) => {
      if (res.code == 4202) {
        ossUploadSuccess(res.data);
      } else {
        ossUploadError(res.data);
      }
      uploadRef.value!.clearFiles();
    });
  }
  // 产品上传
  if (props.uploadType === "product") {
    ProductUpload(filedata).then((res) => {
      if (res.code == 4202) {
        ossUploadSuccess(res.data);
      } else {
        ossUploadError(res.data);
      }
      uploadRef.value!.clearFiles();
    });
  }
  // 品牌上传
  if (props.uploadType === "brand") {
    BrandUpload(filedata).then((res) => {
      if (res.code == 4202) {
        ossUploadSuccess(res.data);
      } else {
        ossUploadError(res.data);
      }
      uploadRef.value!.clearFiles();
    });
  }
  // 专家上传
  if (props.uploadType === "expert") {
    ExpertUpload(filedata).then((res) => {
      if (res.code == 4202) {
        ossUploadSuccess(res.data);
      } else {
        ossUploadError(res.data);
      }
      uploadRef.value!.clearFiles();
    });
  }
  // 用户上传
  if (props.uploadType === "user") {
    UserUpload(filedata).then((res) => {
      if (res.code == 4202) {
        ossUploadSuccess(res.data);
      } else {
        ossUploadError(res.data);
      }
      uploadRef.value!.clearFiles();
    });
  }
};
// 上传完成
const ossUploadSuccess = (res) => {
  if (res) {
    emit("success", res);
  }
};
// 上传失败
const ossUploadError = () => {
  baseMsg("上传失败, 请重新上传", false);
};
// 取消上传
const cancel = () => {
  emit("cancel", false);
};
// 确认上传
const confirmUpload = () => {
  uploadRef.value!.submit();
};
</script>
<style lang="scss">
.note-button-group {
  margin-top: 40px;
  margin-left: 54px;
}
</style>
